<script lang="ts" setup>
import type { OpenCallbackMeta } from '@/components/JumpLinkModal/type'
import type { Guide01ComponentMeta } from '@/definitions/type'
import CompStyle from '@/components/CompAttr/CompStyle.vue'
import { JumpType, JumpTypeMap } from '@/definitions/type'
import { useCompRefs } from '@/hooks/useCompRefs'
import { useCompStyle } from '@/hooks/useCompStyle'
import { Input, Popconfirm, Radio, RadioButton, RadioGroup, Space, Textarea } from 'ant-design-vue'

defineOptions({
  name: 'Guide01Attr',
  inheritAttrs: true,
})
const { activeRender } = useCompStyle<Guide01ComponentMeta>()
// 添加链接
const { JumpLinkModalRef } = useCompRefs()
function handleChooseJumpLink() {
  if (JumpLinkModalRef.value) {
    const { jumpType, jumpTitle, jumpUrl, jumpValue } = activeRender.value!.config
    JumpLinkModalRef.value.open({
      jumpType,
      jumpTitle,
      jumpUrl,
      jumpValue,
    }, chooseJumpCallback)
  }
}
function handleRemoveItemJumpLink() {
  activeRender.value!.config.jumpType = JumpType.None as any
  activeRender.value!.config.jumpTitle = ''
  activeRender.value!.config.jumpUrl = ''
  activeRender.value!.config.jumpValue = ''
}
function chooseJumpCallback(meta: OpenCallbackMeta) {
  if (activeRender.value && meta.applied) {
    activeRender.value!.config = {
      ...activeRender.value.config,
      ...meta.value,
    }
  }
}
</script>

<template>
  <div v-if="activeRender">
    <div class="mb-6">
      <div class="field-title">
        组件模板
      </div>
      <RadioGroup button-style="solid" :value="activeRender.config.template">
        <RadioButton v-for="item of activeRender.config.templateOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <div class="field-title">
      组件内容
    </div>
    <Space :size="20" direction="vertical" style="width: 100%;">
      <div class="field-control">
        <div class="field-label">
          引导标题
        </div>
        <Input
          v-model:value="activeRender.config.title" placeholder="请输入引导标题"
          :min-length="activeRender.config.titleRules?.min" :max-length="activeRender.config.titleRules?.max"
          :required="activeRender.config.titleRules?.required"
        />
      </div>
      <div class="field-control">
        <div class="field-label">
          引导内容
        </div>
        <Textarea
          v-model:value="activeRender.config.description" placeholder="请输入引导内容" :rows="4"
          :min-length="activeRender.config.descriptionRules?.min"
          :max-length="activeRender.config.descriptionRules?.max"
          :required="activeRender.config.descriptionRules?.required"
        />
      </div>
      <div class="field-control">
        <div class="field-control-row">
          <div class="field-label">
            显示按钮
          </div>
          <div class="relative">
            <RadioGroup v-model:value="activeRender.config.isShowButton" button-style="solid">
              <Radio :value="true">
                是
              </Radio>
              <Radio :value="false">
                否
              </Radio>
            </RadioGroup>
          </div>
        </div>
        <div class="field-control-row bg-[#F5F5F5] p-14px items-center rounded">
          <div class="field-label">
            按钮文案
          </div>
          <div class="relative">
            <Input
              v-model:value="activeRender.config.buttonText" placeholder="请输入按钮文案"
              :min-length="activeRender.config.buttonTextRules?.min"
              :max-length="activeRender.config.buttonTextRules?.max"
              :required="activeRender.config.buttonTextRules?.required"
            />
          </div>
        </div>
      </div>
      <div class="field-control-row">
        <div class="field-label">
          按钮链接
        </div>
        <!-- CASE: 未选择链接 -->
        <div
          v-if="(activeRender.config.jumpType as any) === JumpType.None"
          class="cursor-pointer text-primary-app text-sm flex items-center" @click="handleChooseJumpLink()"
        >
          选择跳转到的页面<i class="i-ant-design:right-outlined w-4 h-4 ml-1" />
        </div>
        <!-- CASE: 已选择链接 -->
        <div v-else class="flex-1 flex flex-row items-center">
          <div class="flex-1 w-0 truncate text-main-app text-sm">
            {{ JumpTypeMap.get(activeRender.config.jumpType as any) }} | {{ activeRender.config.jumpTitle }}
          </div>
          <i
            class="i-ant-design:edit-outlined w-4 h-4 cursor-pointer text-primary-app flex-none"
            @click="handleChooseJumpLink()"
          />
          <Popconfirm
            ok-text="确定" cancel-text="取消" title="确定要删除该链接吗?" placement="left"
            @confirm="handleRemoveItemJumpLink()"
          >
            <i class="i-ant-design:delete-outlined w-4 h-4 cursor-pointer text-primary-app flex-none" />
          </Popconfirm>
        </div>
      </div>
    </Space>
    <CompStyle />
  </div>
</template>

<style lang="less" scoped>
.field-title {
  color: var(--app-text-color-main);
  @apply font-bold text-sm mb-14px;
}

.field-control,
.field-control-row {
  color: var(--app-text-color-main);
  @apply flex gap-2;

  .field-label {
    color: var(--app-text-color-second);
    @apply text-sm;
  }
}

.field-control {
  @apply flex-col;
}

.field-control-row {
  @apply flex-row;
}
</style>
